<template>
	<w-layout showNavbar navTitle="订单详情" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view style="position: relative;" class="public-card-12 fc px-5 py-40 mt-50">
					<view class="fr px-40">
						<view class="">
							<view class="">
								{{state.info.shou_region || state.info.address}}
							</view>
							<view class="mt-20">
								<text class="op-50 mr-20">{{state.info.shou_name || state.info.name}}</text>
								<text class="op-50">{{state.info.shou_mobile || state.info.mobile}}</text>
							</view>
						</view>
					</view>
				</view>
			
			
				<!-- 赏品订单 -->
				<template v-if="state.type == 0">
					<view style="min-height: 320rpx;position: relative;" class="public-card-6 fc px-5 py-5 mt-50">
						<view class="public-btn-11 px-40 py-30 fr-ac-jsb">
							<view class="op-70">
								申请时间：{{state.info.addtime}}
							</view>
							<view class="color">
								{{status}}
							</view>
						</view>
						<view class="mt-35 pb-40 px-40" style="">
							<scroll-view class="" scroll-x="true" >
								<view class="fr-ac">
									<view class="mr-30" v-for="(item,index) in state.info.goods" :key="index">
										<cut-corner :arrow="2" clipSize="25rpx">
											<image style="width: 150rpx;height: 150rpx;" :src="item.goodslist_imgurl" mode="widthFix"></image>
										</cut-corner>
										<view class="fs-24 mt-15 ellipsis-1">
											{{item.goodslist_title}}x{{item.prize_num}}
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</template>
				
				<!-- 商城订单 -->
				<template v-if="state.type == 1">
					<view style="min-height: 320rpx;position: relative;" class="public-card-6 fc px-5 py-5 mt-50">
						<view class="public-btn-11 px-40 py-30 fr-ac-jsb">
							<view class="op-70">
								申请时间：{{state.info.pay_time}}
							</view>
							<view class="color">
								{{status}}
							</view>
						</view>
						<view class="mt-35 pb-40 px-40" style="">
							<view class="fr">
								<view class="mr-30">
									<cut-corner :arrow="2" clipSize="25rpx">
										<image style="width: 150rpx;height: 150rpx;" :src="state.info.goods_image" mode="widthFix"></image>
									</cut-corner>
								</view>
								<view class="flex-1">
									<view class="">
										{{state.info.goods_name}}
									</view>
									<view class="color mt-20">
										¥{{state.info.goods_price}}
									</view>
								</view>
								<view class="ml-20">
									<cut-corner :arrow="3" clipSize="8rpx">
										<view class="color fr-ac-jc" style="width: 54rpx;height: 50rpx;background-color: #215665;">
											x{{state.info.goods_num}}
										</view>
									</cut-corner>
								</view>
							</view>
						</view>
					</view>
				</template>
				
				
				<view style="position: relative;" class="public-card-11 fc px-5 py-40 mt-50">
					<view class="px-40">
						<view @click="copy(state.info.order_no || state.info.send_num)" class="fr-ac">
							<view class="op-50">
								订单编号
							</view>
							<view class="ml-20">
								{{state.info.order_no || state.info.send_num}}
							</view>
							<image class="ml-auto" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/copy-fill.png" mode=""></image>
						</view>
						<view class="fr-ac mt-20">
							<view class="op-50">
								支付方式
							</view>
							<view class="ml-20">
								{{state.info.pay_type_name}}
							</view>
						</view>
						<view class="fr-ac mt-20">
							<view class="op-50">
								支付时间
							</view>
							<view class="ml-20">
								{{state.info.pay_time}}
							</view>
						</view>
						<view v-if="state.info.courier_number || state.info.delivery_no" class="fr-ac mt-20">
							<view class="op-50">
								物流单号 
							</view>
							<view class="ml-20">
								{{state.info.courier_number && state.info.courier_name}} {{state.info.courier_number && state.info.courier_number}} {{state.info.delivery_name && state.info.delivery_name}} {{state.info.delivery_name && state.info.delivery_no}}
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="fr-ac-jc px-40 w-100 gap-30" style="position: fixed;bottom: 0rpx;left: 0%;">
					<view v-if="state.info.status != 0 && state.info.status != 1 " @click="goLogistics" class="public-btn-4 transition py-25 t-c mb-60 w-45">
						<view class="text-color-b op-90 fs-32">
							查看物流
						</view>
					</view>
					<view v-if="state.info.status == 2" @click="confim" class="public-btn-4 transition py-25 t-c mb-60 w-45">
						<view class="text-color-b fs-32">
							确认收货
						</view>
					</view>
				</view>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		copy
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		warehouse_send_record_detail,
		seckill_order_detail,
		warehouse_send_confirm,
		seckill_order_confirm,
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		if(options.id !== undefined){
			state.id = options.id
		}
		if(options.type !== undefined){
			state.type = options.type
			loadData()
		}
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const state = reactive({
		id: '',
		type: null,
		info: {},
		
		list:[1,1],
		page:1,
		limit:15,
		last_limit:15,
		
		keyword:'',
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	function loadData(){
		if(state.type == 1){
			get_seckill_order_detail()
		}else{
			get_warehouse_send_record_detail()
		}
	}

	
	function replaceBox(){
		uni.navigateTo({
			url:`/pages/yifan_shang/replace`
		})
	}
	
	
	async function get_seckill_order_detail(){
		const res = await seckill_order_detail({
			id: state.id,
		})
		state.info = res
	}
	async function get_warehouse_send_record_detail(){
		const res = await warehouse_send_record_detail({
			id: state.id,
		})
		state.info = res
	}
	
	const status = computed(()=>{
		let val = state.info.status
		let str = ''
		switch (val){
			case 1 || '1':
				str = '待发货'
				break;
			case 2 || '2':
				str = '待收货'
				break;
			case 3 || '3':
				str = '确认收货'
				break;
			default:
				break;
		}
		return str
	})
	
	function goLogistics(){
		uni.navigateTo({
			url: `/pages/order/logistics?id=${state.id}&type=${state.type}`
		})
	}
	function confim(){
		if(state.type == 1){
			get_seckill_order_confirm(state.id)
		}else{
			get_warehouse_send_confirm(state.id)
		}
	}
	
	// 收货
	async function get_warehouse_send_confirm(id){
		const res = await warehouse_send_confirm({
			id
		})
		uni.$u.toast('收货成功！')
		initData()
		loadData()
	}
	async function get_seckill_order_confirm(id){
		const res = await seckill_order_confirm({
			id
		})
		uni.$u.toast('收货成功！')
		initData()
		loadData()
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
</style>